<template>
  <div class="contract-manage">
    <div class="model-title-css"> 承包商合同</div>
    <div class="background_wrap">
      <div class="operate_wrap">
        <div class="leftBox">
          <el-button type="primary" size="small" class="add buildButtonStyle" v-permission="permission.add" round @click="showDialog('build', '合同新增')"><i class="iconfont icon-icon_add"></i>&nbsp;新增合同
          </el-button>
        </div>

        <div class="rightBox flex-right">
          <el-select class="select" size="small" v-model="search.projectId" value-key="id" filterable clearable placeholder="选择项目" @change="getSectionByProjectId()">
            <el-option v-for="item in projectTree" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>

          <el-select class="select" size="small" v-model="search.sectionId" clearable @change="onSearch" placeholder="选择标段">
            <el-option v-for="item in sectionTree" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>

          <el-input class="input" size="small" v-model="search.searchName" placeholder="合同名称" clearable @change="onSearch"></el-input>

          <el-button class="search" size="small" @click="onSearch">
            <i class="iconfont icon-sousuo"></i> 搜索
          </el-button>
        </div>
      </div>
      <div class="list_wrap">
        <el-table class="project-management-info-qinghai" :border="true" :row-class-name="tableRowStyleName" :cell-class-name="tableCellStyleName" :header-cell-class-name="tableHeaderCellStyleName" :stripe="true" ref="multipleTable" :data="list" tooltip-effect="dark" @cell-click="cellClick" style="width: 100%; font-family: PingFangSC-Regular; font-size: 14px;">
          <el-table-column show-overflow-tooltip prop="xh" align="center" label="序号" width="60">
            <template slot-scope="scope">
              {{ scope.$index + search.pageNo * search.pageSize + 1 }}
            </template>
          </el-table-column>

          <el-table-column v-for="(item, i) in elTableList" :key="i" :width="item.width" :sortable="item.sort? item.sort :false" :prop="item.prop" :label="item.name" show-overflow-tooltip>
          </el-table-column>

          <el-table-column show-overflow-tooltip prop="quantity" width="160" label="合同总额(万元)">
            <template slot-scope="scope">
              <div style="text-align: right;">
                <!-- {{ scope.row.amount|moneyFilter }} -->
                {{scope.row.amount}}
              </div>
            </template>
          </el-table-column>

          <el-table-column show-overflow-tooltip label="操作" width="250" fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" class="menu_icon iconfont icon-icon_look action_color1" v-permission="permission.show" @click="showDialog('check','承包商合同信息查看',scope.row.id)">&nbsp;查看</el-button>
              <el-button size="mini" class="menu_icon iconfont icon-xiugai-copy action_color1" v-permission="permission.edit" @click="showDialog('edit','承包商合同信息编辑',scope.row.id)">&nbsp;修改</el-button>
              <el-button size="mini" class="menu_icon iconfont icon-shanchu action_color2" v-permission="permission.del" @click="showDialog('delete','删除',scope.row.id)">&nbsp;删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination style="float: right; margin-top: 30px;" layout="prev, pager, next" :page-size="search.pageSize" :total="search.total" :current-page="search.pageNo + 1" :prev-text="tablePaginationPrev" :next-text="tablePaginationNext" @current-change="paginationChange">
        </el-pagination>
      </div>
    </div>
    <Detail :postDetail="postDetailData" @reloadList="getList(true)"></Detail>

  </div>
</template>
<script>

import {
  tableRowStyleGol,
  tableCellStyleGol,
  tableHeaderCellStyleGol,
  doCreateObject
} from '@/utils/publicFun'

import crudDict from '@/api/system/dict'
import msgUtil from '@/utils/msgUtil'
import projectSectionInfo from '@/api/buss/common'
import mainlineContract from '@/api/buss/mainlineContract'
import selectProjectAndSection from '@/mixins/selectProjectAndSection'
export default {
  mixins: [selectProjectAndSection],
  name: "contractorContract",
  components: {
    Detail: require('./contractorContract-detail/contractorContract-detail').default,
  },
  data() {
    return {

      permission: {
        add: ['100', 'contractor:add'],
        show: ['100', 'contractor:show'],
        edit: ['100', 'contractor:edit'],
        del: ['100', 'contractor:del'],
      },

      tableRowStyleName: tableRowStyleGol,
      tableCellStyleName: tableCellStyleGol,
      tableHeaderCellStyleName: tableHeaderCellStyleGol,
      tablePaginationPrev: '上一页',
      tablePaginationNext: '下一页',

      selectedIds: [], // 已经选择的列表id
      dialogTableVisible: false,
      boundContractId: '',

      contractsAmount: 0,
      //搜索条件
      search: {
        //pageIndex: 0,
        pageSize: 10,
        //pageSum: 0,
        pageNo: 0,
        total: 0,
        sortField: 'createTime',
        company: { children: [] },
        project: { children: [] },

        companyId: '',
        projectId: '',
        sectionId: "",
        //工程类合同-施工
        searchType: "",
        searchName: "",
      }, // 搜索参数
      addCan: false,//是否有导出权限
      unitOptions: [{
        label: "检查单位",
        value: ""
      }], //  选项
      typeOptions: [{
        label: "合同类型",
        value: ""
      }],
      searchCode: [{
        label: "状态",
        value: ""
      }],
      //  选项
      list: [], // 列表
      //  单位项目标段选择项
      companyTree: [],
      projectTree: [],
      sectionTree: [],
      postDetailData: {
        show: false,
        type: 'build'
      }, // 向详情子组件的传值
      postHistoryData: {
        show: false,
      }, // 向子组件的传值
      elTableList: [
        {
          name: '项目名称',
          prop: 'projectName',
          width: '150',
        },
        {
          name: '标段名称',
          prop: 'sectionName',
          width: '120',
        },
        {
          name: '合同编号',
          prop: 'number',
          width: '150',
        },
        {
          name: '合同类型',
          prop: 'typeName',
          width: '150',
        },
        {
          name: '合同名称',
          prop: 'title',
          width: '450',
        },
        {
          name: '合同签订单位(乙方)',
          prop: 'secondPatyName',
          width: '220'
        }
      ], // el的table列表
      //  新增权限
      allowAdd: false,
    }
  },
  filters: {
    moneyFilter(value) {
      try {
        let before = value.toFixed(2)
        before = before.toString()
        let num = before.split('.')[0]
        let numSmall = before.split('.')[1]
        let result = [], counter = 0;
        num = (num || 0).toString().split('');
        for (let i = num.length - 1; i >= 0; i--) {
          counter++;
          result.unshift(num[i]);
          if (!(counter % 3) && i != 0) {
            result.unshift(',');
          }
        }
        let after = numSmall === undefined ? result.join('') : result.join('') + '.' + numSmall
        return after
      } catch (e) {
        return ""
      }
    },
  },




  beforeCreate() {
    // 默认展示列表
    //this.$store.state.asideClick = true
  },

  created() {
    this.initData()
    // this.getList()
  },
  methods: {
    onSearch() {
      this.search.pageNo = 0;
      this.search.total = 0;
      this.getList(true)
    },
    initData() {
      this.typeOptions = []
      this.companyTree = []
      crudDict.getByCode('MContractType').then(res => {
        if (res.code === 200) {
          var data = res.data;
          var typeId = ""
          for (var i in data) {
            //this.typeOptions.push({'value':data[i].id,'label':data[i].name});
            if (data[i].name == "施工合同") {
              typeId = data[i].id
            }
          }
          this.search.searchType = typeId
        } else {
          msgUtil.error2(res.data.message)
        }
      }).catch(() => {
        msgUtil.error2("获取问题归属失败")
      })

      projectSectionInfo.getProjSecTreeAll().then(res => {
        if (res.code === 200) {
          // console.log(res)
          this.$set(this, 'projectTree', res.data)
          if (this.$headerSearch) {
            this.$set(this.search, 'projectId', this.changeHeaderProject)
            this.projectTree.forEach((item) => {
              if (item.id === this.search.projectId) {
                this.sectionTree = item.children
              }
            })
            this.getList(true)
          }
        } else {
          msgUtil.error2(res.data.message)
        }
      }).catch(() => {
        msgUtil.error2("获取项目标段树失败")
      })


    },
    getSectionByProjectId() {
      if (this.search.sectionId) {
        this.search.sectionId = ''
      }
      if (this.search.projectId) {
        this.projectTree.forEach((item) => {
          if (item.id === this.search.projectId) {
            this.sectionTree = item.children
            if (this.sectionTree.length == 1) {
              this.search.sectionId = this.sectionTree[0].id
            }
          }
        })
      } else {
        this.sectionTree = []
      }
      this.onSearch()
    },
    // 获取列表 api
    getList(reload) {

      this.list = []
      let param = {
        pageNo: this.search.pageNo,
        pageSize: this.search.pageSize,
        companyId: '',
        projectId: this.search.projectId,
        sectionIds: this.search.sectionId,
        title: this.search.searchName,
        mainlineContractType: 1
      }

      mainlineContract.getTablePage(param).then(res => {
        if (res.status == 1) {
          if (res.list.length > 0) {
            this.list = res.list
            //this.$set(this.list, this.list.length, res.list)
          }
          this.search.total = res.total
        } else {
          msgUtil.error2(res.data.message)
        }
      })


    },



    paginationChange(index) {
      this.search.pageNo = index - 1
      this.getList()
    },

    /*  操作 */
    showDialog(type, typeNmae, detailId) {
      switch (type) {
        case 'build':
          this.postDetailData = {
            show: true,
            type: type,
            typeNmae: typeNmae,
            detailId: '',
          }
          break
        case 'edit':
          this.postDetailData = {
            show: true,
            type: type,
            typeNmae: typeNmae,
            detailId: detailId,
          }
          break
        case 'check':
          this.postDetailData = {
            show: true,
            type: type,
            typeNmae: typeNmae,
            detailId: detailId,
          }
          break
        case 'delete':
          if (detailId === '') {
            msgUtil.error2('请先选择要删除的记录！')
            return
          }
          msgUtil.confirm('确认删除该条数据?').then(res => {
            let idlist = []
            idlist.push(detailId)
            let param = {
              ids: idlist
            }
            mainlineContract.del(param).then(res => {
              if (res.status === 1) {
                msgUtil.success2('删除成功!')
                this.getList()
              } else {
                msgUtil.error2(res.data.message)
              }
            })
          })
          break

      }
    },

    // 点击单元格
    cellClick(row, column, cell, event) {

      if (column.property === 'number') {
        this.postDetailData = {
          show: true,
          type: 'check',
          typeNmae: '',
          detailId: row.id,
        }
      }
    },
  },
}
</script>

<style scoped lang="scss">
.operate_wrap {
  height: 40px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;

  .leftBox {
    display: flex;
    align-items: center;
  }

  .rightBox {
    display: flex;
    align-items: center;
  }
  .select {
    width: 150px;
    margin-right: 15px;
  }
  .input {
    width: 150px;
    margin-right: 15px;
  }
  .mr15 {
    margin-right: 15px;
  }
  .search {
    width: 88px;
    color: #fff;
    margin-left: 0 !important;
  }
}

.list_wrap {
  margin-top: 20px;
}
</style>
